<template>
  <a-modal v-bind:visible="isShowDetail" width="40%" title="详情" :footer="false" @cancel="onCancel">
    <a-form-model :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
      <a-form-model-item label="注册时间">{{ form.reg_time }}</a-form-model-item>
      <a-form-model-item label="手机号码">{{ form.phone }}</a-form-model-item>
      <a-form-model-item label="实名状态">{{ form.is_real_verify }}</a-form-model-item>
      <a-form-model-item label="账户余额">
        <a-input v-model="form.money"></a-input>
      </a-form-model-item>
      <a-form-model-item label="累计收益">{{ form.total_profit }}</a-form-model-item>
      <a-form-model-item label="总推广人数">{{ form.promoter_total }}</a-form-model-item>
      <a-form-model-item label="直推人数">{{ form.children_promoter_total }}</a-form-model-item>
      <a-form-model-item label="间推人数">{{ form.allchildren_promoter_total }}</a-form-model-item>
    </a-form-model>
    <div class="btnStyle">
      <a-button type="primary" @click="edit">修改</a-button>
    </div>
  </a-modal>
</template>

<script>
import { viewPhotoAPI, changeGradeAPI } from '@/api/userinfo.js'
export default {
  name: 'UserDetail',
  props: {
    isShowDetail: {
      type: Boolean,
      default: false
    },
    viewId: {
      type: Number,
      default: undefined
    }
  },
  watch: {
    async isShowDetail(boo) {
      if (boo) {
        const { data } = await viewPhotoAPI({ id: this.viewId })
        this.form = data
      }
    }
  },
  data() {
    return {
      form: {
        money: ''
      }
    }
  },
  methods: {
    onCancel() {
      this.$emit('update:isShowDetail', false)
      this.$emit('update:viewId', undefined)
    },
    async edit() {
      const send = {
        brand_id: process.env.VUE_APP_BRAND_ID,
        ids: 199,
        level_id: 29,
        money: this.form.money,
        status: 1
      }
      const { data } = await changeGradeAPI(send)
      this.$emit('upload')
      this.$emit('update:isShowDetail', false)
      this.$emit('update:viewId', undefined)
      this.$message.success('操作成功')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-form-item {
  margin: 0;
}
.btnStyle {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
